<template>
  <div class="container">
    <div class="app-container">
      <el-row style=" padding: 20px;" width="100%">
        <el-row style="border-bottom: 1px solid #ccc;" width="100%">
          <span style="margin-top: 20px;margin-left: 20px">车牌号码:</span>
          <el-input placeholder="请输入车牌号码" style="margin-top: 15px;margin-bottom: 10px; margin-left: 10px; width: 200px;" size="mini" />
          <span style="margin-top: 20px;margin-left: 20px">车主姓名:</span>
          <el-input placeholder="请输入车主姓名" style="margin-top: 15px;margin-bottom: 10px; margin-left: 10px; width: 200px;" size="mini" />
          <span style="margin-top: 20px ;margin-left: 20px;">状态:</span>
          <el-select v-model="value" placeholder="请选择" size="mini">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-button type="primary" size="mini" style=" margin-top: 10px; margin-left: 20px; margin-bottom: 20px; width: 65px; border-radius: 10px  ;">查询</el-button>
        </el-row>
      </el-row>
      <el-row style="margin-top: 10px;" type="flex">
        <el-button type="primary" size="mini" style="border-radius: 5px;margin-left: 20px; margin-bottom: 20px;" @click="addBuilding">添加月卡</el-button>
        <el-button type="primary" size="mini" style="border-radius: 5px;margin-left: 20px; margin-bottom: 20px;" @click="addBuilding">批量删除</el-button>
        <el-tag style="margin-left: 50%;">本园区共计 1510 个车位，月卡用户 0 人，车位占有率 0.00%</el-tag>
      </el-row>
      <template>
        <el-table
          ref="multipleTable"
          :data="list"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            type="selection"
            width="55"
          />
          <el-table-column
            type="index"
            label="序号"
            width="100"
          />
          <el-table-column
            prop="personName"
            label="车主名称"
            width="100"
          />
          <el-table-column
            prop="personName"
            label="车主名称"
            width="100"
          />
          <el-table-column
            prop="phoneNumber"
            label="联系方式"
            width="100"
            show-overflow-tooltip
          />
          <el-table-column
            prop="carNumber"
            label="车牌号码"
            width="100"
            show-overflow-tooltip
          />
          <el-table-column
            prop="carBrand"
            label="车辆品牌"
            width="100"
            show-overflow-tooltip
          />
          <el-table-column
            prop="totalEffectiveDate"
            label="剩余有效天数"
            width="150"
            show-overflow-tooltip
          />
          <el-table-column
            prop="cardStatus"
            label="状态"
            width="100"
            show-overflow-tooltip
          ><template v-slot="{row}">
            <span> {{ row.cardStatus===0? "可用":row.cardStatus===1?"已过期":'无' }} </span>
          </template>
          </el-table-column>
          <el-table-column
            prop="address"
            label="操作"
            show-overflow-tooltip
          >
            <template>
              <el-button type="text" size="mini" @click="editRole(scope.row.id)">续费</el-button>
              <el-button type="text" size="mini" @click="deleteRole(scope.row.id)">查看</el-button>
              <el-button type="text" size="mini" @click="editRole(scope.row.id)">编辑</el-button>
              <el-button type="text" size="mini" @click="deleteRole(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <el-row type="flex" justify="end">
        <el-pagination
          layout="prev, pager, next , jumper , total"
          :total="add.total"
          :page-size="add.pageSize"
          :current-page="add.page"
          @current-change="changePage"
        />
      </el-row>
    </div>
  </div>
</template>
<script>
import { getMonthlAPI } from '@/api'

export default {
  name: 'Attendance',
  data() {
    return {
      list: [],
      add: {
        total: 0,
        name: '',
        pageSize: 10,
        page: 1
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    async getList() {
      const { rows, total } = await getMonthlAPI(this.add)
      this.list = rows
      this.add.total = total
    },
    changePage(newpage) {
      this.add.page = newpage
      this.getList()
    },
    editRole(id) {
      this.currentNodeId = id
    }
  }
}
</script>
